<template>
	<view class="">
		<view class="bigBox">
				<button class="exportBtn" @click="exportImg">导出</button>
				<view class="imgBox">
					<text class="tipText" v-show="!imageUrl">请设置风格、画面尺寸及描述词</text>
					<image v-show="imageUrl" :src="imageUrl" mode="aspectFit"></image>
				</view>
		
				<view class="styleBigBox">
					<text class="styleTitle">视频风格</text>
					<view class="styleBox">
						<view class="styleItem" v-for="modelItem in modelList" @click="seleModel = modelItem.id">
							<image :class="seleModel == modelItem.id?'sele':''" :src="modelItem.icon" mode="widthFix"></image>
							<text>{{modelItem.name}}</text>
						</view>
					</view>
				</view>
		
				<view class="ratioBigBox">
					<text class="ratioTitle">图片比例</text>
					<view class="ratioBox">
						<view class="ratioItem" @click="seleRatio = 2">
							<view :class="seleRatio == 2?'sele ratio1':'ratio1'">
								<text>16:9</text>
							</view>
						</view>
						<view class="ratioItem" @click="seleRatio = 1">
							<view  :class="seleRatio == 1?'sele ratio2':'ratio2'"  style="height:26.5px;">
								<text>4:3</text>
							</view>
						</view>
						<view class="ratioItem" @click="seleRatio = 0">
							<view  :class="seleRatio == 0?'sele ratio3':'ratio3'" style="height: 35px;">
								<text>1:1</text>
							</view>
						</view>
						<view class="ratioItem" @click="seleRatio = 4">
							<view  :class="seleRatio == 4?'sele ratio4':'ratio4'" style="width: 26.49px;height: 35px;">
								<text>3:4</text>
							</view>
						</view>
						<view class="ratioItem" @click="seleRatio =3">
							<view  :class="seleRatio ==3?'sele ratio5':'ratio5'" style="height:35px;width: 19.86px;">
								<text>9:16</text>
							</view>
						</view>
					</view>
				</view>
				<view class="promptBox">
					<textarea class="promptInput" v-model="promptData" placeholder="请输入绘画关键词,建议使用英文!" />
				</view>
				<button class="paintBtn" @click="paint">生成 | -{{conputePegg()}} <image class="pegg" src="../../static/皮蛋@2x.png"></image></button>
			</view>
		<Menu></Menu>
	</view>
	</template>

<script>
	import api from '../../api/api.js'
	import {
		setInfo,
		quit,
		parseUserData
	} from '../../hook/auth.js'
	import Menu from "../components/menu.vue"
	export default {
		components:{Menu},
		data() {
			return {
				userData: {}, //用户信息
				imageUrl: "", //生成的图片 
				modelList: [], //模型列表
				seleModel: -1, //选择的模型id
				promptData: "",//关键词
				seleRatio:1,//选择的尺寸
			}
		},
		methods: {
			//获取模型列表
			getModelList() {
				const self = this
				api.modelList({
					uid: this.userData.id,
					channel: 'douyinApplet',
					mateType: 1
				}).then(res => {
					console.log(res)
					if (res.data.length > 0) {
						res.data.forEach(val => {
							val.children.forEach(val1 => {
								self.modelList.push(val1)
							})
						})
						self.seleModel = self.modelList[0].id
					}
				})
			},
			//发起Ai绘画请求
			async paint(){
				const self = this
				let seleModelObj = {}
				self.modelList.forEach(val=>{
					if(val.id == self.seleModel){
						seleModelObj=val;
					}
				})
				uni.showLoading({
					title:"正在检测敏感词"
				})
				//敏感词检测
				let flag =  await api.detection({spec:{only_words:false,word:self.promptData,type:1}}).then(res=>{
					if(res.code==505){
						return false
						self.promptData = res.msg
					}
					return true
				})
				if(!flag){
					uni.hideLoading()
					self.promptData = ""
					uni.showToast({
						title:"存在敏感词，请重新输入",
						icon:"none"
					})
					return false
				}
				
				let req = {
					uid : self.userData.id,
					channel : "douyinApplet",
					channel_id : 7,
					pegg : self.conputePegg()*10,
					auth_token: self.userData.auth_Token,
					spec:{
						...JSON.parse(seleModelObj.preset_info) ,
						hd:{
							scale:2,
							strength:0.65
						},
						ratio:self.seleRatio,
						batch_size:1
					}
				}
				req.spec.prompt +=self.promptData
				if(self.userData.pegg<req.pegg){
					uni.showToast({
						title:"皮蛋不足！"
					})
					return false
				}
				uni.showLoading({
					title:"正在生成中。。。"
				})
				api.paint(req).then(res=>{
					console.log(res)
					uni.hideLoading()
					if(res.code==200&&res.data.images.length>0){
						self.imageUrl = res.data.images[0].url
					}else{
						uni.showToast({
							title:res.msg
						})
					}
					this.upUserData()
				})
			},
			//计算应当消耗皮蛋
			conputePegg(){
				if(this.userData.v_right_level==1){
					return 4;
				}else{
					return 1;
				}
			},
			//更新用户信息
			upUserData(){
				const self = this
				api.userInfo({spec:{uid:this.userData.id}}).then(res=>{
					if(res.code == 200){
						setInfo(res.data)
						self.userData = res.data
					}else{
						quit()
					}
					console.log('更新用户信息',res)
				})
			},
			//导出图片
			exportImg(){
				  tt.downloadFile({
				      url: this.imageUrl,
				      header: {
				        "content-type": "application/json",
				      },
				      success: (res) => {
				        let filePath = res.tempFilePath;
				        tt.saveImageToPhotosAlbum({
				          filePath, // 暂不支持网络图片/本地图片地址，需与tt.downloadFile一起使用
				          success: (res) => {
				            tt.showToast({ title: "成功保存到本地相册" });
				          },
				          fail: (err) => {
				            let errType = err.errMsg.includes(
				              "saveImageToPhotosAlbum:fail cancel"
				            )
				              ? "取消保存"
				              : "保存失败";
				            tt.showModal({
				              title: errType,
				              content: err.errMsg,
				              showCancel: false,
				            });
				          },
				        });
				      },
				      fail: (err) => {
				        tt.showModal({
				          title: "下载出错",
				          content: err.errMsg,
				          showCancel: false,
				        });
				      },
				    });
			}
		},
		mounted() {
			this.userData = parseUserData()
			this.getModelList()
		}
	}
</script>

<style scoped>
	.pegg {
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}

	.paintBtn {
		margin-top: 20px;
		vertical-align: middle;
		width: 100%;
		height: 56px;
		border-radius: 32px;
		background: rgba(18, 205, 217, 1);
		line-height: 56px;
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.12px;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 20px;
	}

	.promptInput {
		margin-top: 20px;
		width: 100%;
		height: 60px;
		opacity: 1;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
		box-sizing: border-box;
		padding: 4px;
		text-align: center;
		font-size: 10px;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(128, 128, 128, 1);
	}

	.ratioBox text {
		font-size: 9px;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 1);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	 .sele{
		border: 1px solid rgba(18, 205, 217, 1);
	}	
	.ratioItem {
		text-align: center;
		margin: 0 auto;
		position: relative;
	}

	.ratio1,
	.ratio2,
	.ratio3,
	.ratio4,
	.ratio5 {
		width: 35px;
		height: 20px;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 2.5px;
		background: rgba(232, 232, 232, 1);
	}

	.ratioBox {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 50px;
		border-radius: 2.5px;
		border: 0.5px solid rgba(229, 229, 229, 1);
	}


	.styleItem text {
		display: block;
		font-size: 9px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 14px;
		color: rgba(255, 255, 255, 1);
	}

	.styleItem image {
		width: 50px;
		height: 50px;
		border-radius: 5px;
		background-color: aqua;
		box-sizing: border-box;
	}

	.styleItem {
		width: 20%;
		display: inline-block;
		text-align: center;
	}

	.styleBox {
		width: 100%;
		height: 170px;
		padding: 6px;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.styleTitle,
	.ratioTitle {
		left: 14px;
		top: 305px;
		width: 48px;
		height: 18px;
		opacity: 1;
		/** 文本1 */
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 17.38px;
		color: rgba(229, 229, 229, 1);
		text-align: left;
		vertical-align: top;

	}

	.styleBigBox {
		position: relative;
		width: 100%;
		height: 200px;
		margin-top: 10px;
	}

	.tipText {
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 200px;
		color: rgba(166, 166, 166, 1);
	}

	.imgBox {
		text-align: center;
		width: calc(100% + 20px);
		margin-left: -10px;
		height: 200px;
		opacity: 1;
		background: rgba(56, 56, 56, 1);
	}
	.imgBox image{
		width: 100%;
		height: 100%;
	}

	.exportBtn {
		position: absolute;
		right: 10px;
		top: 20px;
		padding: 0;
		color: rgba(255, 255, 255, 1);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 3.71px;
		width: 52px;
		height: 24px;
		line-height: 24px;
		border-radius: 16.53px;
		background: rgba(18, 205, 217, 1);
		border: 0.74px solid rgba(0, 186, 173, 1);
		box-shadow: 0px 0.74px 1.49px rgba(67, 207, 124, 0.25);
	}

	.bigBox {
		position: relative;
		width: 100%;
		height: 100vh;
		padding: 10px;
		padding-top: 60px;
		padding-bottom: 60px;
		box-sizing: border-box;
		overflow-y:auto;
		overflow-x:hidden;
		opacity: 1;
		background: rgba(34, 34, 34, 1);
	}
</style>